<template>
  <!-- <el-container style="height: 500px; border: 1px solid #eee" class="home">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

        <el-menu :router="true" :default-openeds="['1']">

          <el-submenu :index="item.index" v-for="item in submenu" :key="item.index">
            <template slot="title"><i class="el-icon-message"></i> {{item.name}} </template>
            <el-menu-item-group>
           
              <el-menu-item :index="elements.index" v-for="elements in item.menu" :key="elements.index">
                {{elements.name}}
              </el-menu-item>
              
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header style="text-align: center; font-size: 20px">
          <span class="title">有点东西的学生管理系统</span>
        </el-header>
        <el-main style="height:800px">

           <router-view></router-view>

        </el-main>
        
      </el-container>
    </el-container> -->

  <el-container>
    <!-- 顶部 -->
    <el-header>有点东西的学生管理系统

    </el-header>

    <el-container>
      <!-- 左边的导航栏 -->
      <el-aside width="200px">

        <el-row class="tac">
          <el-col :span="12">
           
            <el-menu default-active="2" class="el-menu-vertical-demo"
              background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="true">

              <el-submenu :index="item.index" v-for="item in submenu" :key="item.index">

                <template slot="title" class="nav">
                  <i class="el-icon-location"></i>
                  <span> {{item.name}} </span>
                </template>
                <el-menu-item-group v-for="element in item.menu" :key="element.index">
                 
                  <el-menu-item :index="element.index" > 
                    {{element.name}}
                  </el-menu-item>
                  
                </el-menu-item-group>    
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>

      </el-aside>
      <!-- 右边的内容栏 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(5).fill(item),
        submenu: [{
            name: '学生管理',
            index: '1',
            menu: [{
                name: '新增学生',
                index: '/home/studentsAdd'
              },
              {
                name: '学生列表',
                index: "/home/studentsList"
              }
            ],
          },
          {
            name: '班级管理',
            index: '2',
            menu: [{
                name: '新增班级',
                index: '/home/classesAdd'
              },
              {
                name: '班级列表',
                index: "/home/classesList"
              }
            ],
          },
           {
            name: '专业管理',
            index: '3',
            menu: [{
                name: '新增专业',
                index: '/home/subjectsAdd'
              },
              {
                name: '专业列表',
                index: "/home/subjectsList"
              }
            ],
          },
          {
            name: '班主任管理',
            index: '4',
            menu: [{
                name: '新增班主任',
                index: '/home/subjectsAdd'
              },
              {
                name: '班主任列表',
                index: "/home/directorsList"
              }
            ],
          },
          {
            name: '教师管理',
            index: '5',
            menu: [{
                name: '新增教师',
                index: '/home/teacherAdd'
              },
              {
                name: '教师列表',
                index: "/home/teachersList"
              }
            ],
          },

        ],
      }
    }
  };
</script>

<style scoped>
  .el-header,
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    font-size: 22px ;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
    
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    min-height: 90vh;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-submenu__title{
    width: 200px;
    
  }
  .el-col{
    width: 200px;
    box-sizing: border-box;
  }
</style>